<template>
  <div>
    <div class="gui-padding bgf">
      <!--导航区域-->
      <div class="mb15">
        <a-breadcrumb>
          <a-breadcrumb-item>船员管理</a-breadcrumb-item>
          <a-breadcrumb-item>船员资料</a-breadcrumb-item>
        </a-breadcrumb>
      </div>
      <!--搜索区域-->
      <div class="mb10 flex align-items justify-content-between">
        <div class="flex">
          <span class="mr5"><a-button type="primary" size="small" @click="handleOpenAdd"> <template #icon><PlusOutlined/> </template>新增船员资料</a-button></span>
          <cc-upload-xls @success="handleUploadSuccess">
            <span class="mr5"><a-button type="primary" size="small"> <template #icon><CodepenOutlined /> </template>数据导入</a-button></span>
          </cc-upload-xls>
          <a href="/模板-船员资料导入模板(船员云系统).xlsx" class="mr5"><a-button type="primary" size="small"> <template #icon><ArrowDownOutlined /> </template>下载导入模板</a-button></a>
          <div class="copy-btn" @click="handleClipboardText($event)" data-clipboard-target="#copyhtml"><a-button type="primary" size="small"> <template #icon><CopyOutlined /></template>复制添加链接</a-button></div>
          <div id="copyhtml" style="position: fixed;top:-1000px;">
            http://www.kaiheng.top/adduser?sid={{userState.systemId}}
          </div>
        </div>
        <a-form layout="inline" autocomplete="off" ref="searchFormRef" :model="queryParams">
          <!--<a-form-item label="船员姓名：" name="xingMing">
            <a-input v-model:value.trim="queryParams.xingMing" size="small" style="width: 150px;height: 32px;" placeholder="请输入船员姓名" allow-clear/>
          </a-form-item>-->
          <a-form-item label="船员：" name="shenFenHao">
            <a-input v-model:value.trim="queryParams.xingMing" size="small" style="width: 200px;height: 32px;"
                     placeholder="请输入船员姓名/身份证号" allow-clear/>
          </a-form-item>
          <a-form-item label="职位" name="zhiWei">
            <a-select
                ref="select"
                placeholder="请选择"
                allow-clear
                v-model:value="queryParams.zhiWei"
                style="width: 120px"
            >
              <a-select-option v-for="item in zhiweiList" :key="item.id" :value="item.zhiWeiMing">
                {{ item.zhiWeiMing }}
              </a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item label="等级" name="zhengShuDengJi">
            <a-select  allow-clear placeholder="请选择"   style="width: 120px" v-model:value="queryParams.zhengShuDengJi">
              <a-select-option :value="item.name" :key="item.name" v-for="item in zsdjList">{{item.name}}</a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item>
            <div class="flex">
              <a-button type="primary" size="small" @click="handleSearch">
                <SearchOutlined/>
                搜索
              </a-button>
              <a-button type="primary" danger size="small" @click="handleReset" class="ml10">
                <UndoOutlined/>
                重置
              </a-button>
            </div>
          </a-form-item>
        </a-form>
      </div>
      <!--表格区域-->
      <a-table :columns="columns"
               rowClassName="items"
               :loading="tableLoading"
               :scroll="{ x: 'calc(100vw - 326px)', y: 'calc(100vh - 268px)' }"
               :pagination="false"
               :data-source="tableData"
               size="small" sticky bordered>
        <template #bodyCell="{ column, text, record }">
          <template v-if="column.dataIndex === 'xingMing'">
            <a href="javascrcipt:void(0);" @click="handleShowEdit(record.id)">{{ record.xingMing }}</a>
          </template>
          <template v-if="column.dataIndex === 'shenFenHao'">
            <cc-id-card :idcard="record.shenFenHao"></cc-id-card>
          </template>
          <template v-else-if="column.dataIndex === 'operation'">
            <div class="editable-row-operations">
              <span class="mr5">
                <a-button type="primary" size="small" :loading="addLoading" @click="handleAdGengzhongRefOpen(record)"> <template
                    #icon><PlusOutlined/> </template>新增追踪记录</a-button>
              </span>
              <span class="mr5">
               <a-button type="primary" size="small" @click="handleEdit(record.id)"> <template #icon><EditOutlined
                   style="font-size:12px"/></template>编辑</a-button>
              </span>
              <span>
              <a-popconfirm title="你确定删除吗?" @confirm="handleDelete(record.id)">
               <a-button type="primary" size="small" danger> <template #icon><CloseOutlined
                   style="font-size:12px"/></template>删除</a-button>
              </a-popconfirm>
            </span>
            </div>
          </template>
        </template>
      </a-table>
      <!--分页区域-->
      <div class="flex  mt20">
        <a-pagination
            v-model:current="queryParams.pageNo"
            v-model:page-size="queryParams.pageSize"
            @change="handleChangePageNo"
            :page-size-options="pageSizeOptions"
            :show-total="total => `共 ${total} 项`"
            show-size-changer
            :total="total"/>
      </div>
      <add-info ref="addRef" @success="handleLoadData"></add-info>
      <edit-info ref="editRef" @success="handleLoadData"></edit-info>
      <show-info ref="showRef" @success="handleLoadData"></show-info>
      <add-user-base-dongtai ref="addGengzhongRef" @success="handleLoadData"></add-user-base-dongtai>
    </div>
  </div>
</template>
<script lang="ts" setup>
import AddInfo from './compoments/AddInfo.vue'
import ShowInfo from './compoments/ShowInfo.vue'
import EditInfo from './compoments/EditInfo.vue'
import Clipboard from "clipboard";
import AddUserBaseDongtai from "./compoments/AddUserBaseDongtai.vue";

const addGengzhongRef = ref({})
const userState = useStore.userState()
const zsdjList = computed(() => userState.getParameterList('zsdj'))
const zhiweiList = ref([])
const searchFormRef = ref(null)
const tableLoading = ref(false);
const tableData = ref([]);
const total = ref(0)
const pages = ref(0)
const addLoading = ref(false)
const addRef = ref({})
const showRef = ref({})
const editRef = ref({})
const pageSizeOptions = ref(['15', '20', '30', '40', '50']);
const queryParams = reactive({
  "pageNo": 1,
  "pageSize": 20,
  "shenFenHao": null,
  "xingMing": null,
  "zhiWei":null,
  "status":1
})

// 获取选择的行id
const state = reactive({
  selectedRowKeys: [],
  loading: false,
})

// 定义表格的列信息
const columns = [
  {title: '序号', fixed: "left", align: "center", width: 60, dataIndex: 'index', customRender: ({text, record, index}) => index + 1},
  {title: '船员中文名', align: "center", fixed: "left", dataIndex: 'xingMing', width: '100px',},
  {title: '身份证号', align: 'center', fixed: "left", dataIndex: 'shenFenHao', width: '180px',},
  {title: '证书职位', dataIndex: 'zhiWei', align: 'center', width: '150px',},
  {title: '证书等级', dataIndex: 'zhengShuDengJi', align: 'center', width: '200px',},
  {title: '手机号',dataIndex: 'shouJiHao', align: 'center', width: '120px'},
  {title: '英文名', align: "center",  dataIndex: 'yingWenMing', width: '120px',},
  {title: '性别',dataIndex: 'xingBie', align: 'center', width: '80px'},
  {title: '出生日期',dataIndex: 'chuShengRiQi', align: 'center', width: '120px'},
  {title: '船员分组',dataIndex: 'fenZu', align: 'center', width: '150px'},
  {title: '籍贯',dataIndex: 'jiGuan', align: 'center', width: '80px'},
  {title: '血型',dataIndex: 'xueXing', align: 'center', width: '80px'},
  {title: '民族',dataIndex: 'minZu', align: 'center', width: '80px'},
  {title: '婚姻状况',dataIndex: 'hunYin', align: 'center', width: '100px'},
  {title: '宗教信仰',dataIndex: 'zongJiaoXinYang', align: 'center', width: '100px'},
  {title: '船员类型',dataIndex: 'leiXing', align: 'center', width: '150px'},
  {title: '毕业院校',dataIndex: 'biYeYuanXiao', align: 'center', width: '200px'},
  {title: '最高学历',dataIndex: 'xueLi', align: 'center', width: '150px'},
  {title: '专业',dataIndex: 'zhuangYe', align: 'center', width: '200px'},
  {title: '英语水平',dataIndex: 'yingYuShuiPing', align: 'center', width: '80px'},
  {title: '计算机水平',dataIndex: 'jiSuanJiShuiPing', align: 'center', width: '100px'},
  {title: '年龄',dataIndex: 'nianling', align: 'center', width: '100px'},
  {title: '身高',dataIndex: 'shenGao', align: 'center', width: '100px'},
  {title: '体重',dataIndex: 'tiZhong', align: 'center', width: '100px'},
  {title: '鞋号',dataIndex: 'xieHao', align: 'center', width: '80px'},
  {title: '邮箱',dataIndex: 'youXiang', align: 'center', width: '200px'},
  {title: '地址',dataIndex: 'diZhi', align: 'center', width: '300px'},
  {title: '工作服号',dataIndex: 'gongZuoHao', align: 'center', width: '80px'},
  {title: '紧急联系人',dataIndex: 'jinJiLianXiRen', align: 'center', width: '150px'},
  {title: '紧急联系人电话',dataIndex: 'jinJiDianHua', align: 'center', width: '150px'},
  {title: '紧急联系人地址',dataIndex: 'jinJiDiZhi', align: 'center', width: '300px'},
  {title: '本人银行卡号',dataIndex: 'kaHao', align: 'center', width: '200px'},
  {title: '开户行',dataIndex: 'kaiHuHang', align: 'center', width: '200px'},
  {title: '操作', dataIndex: 'operation', align: "center", fixed: "right", width: '340px',},
];

const handleReset = () => {
  searchFormRef.value.resetFields()
  console.log("====>>>>",queryParams);
  queryParams.xingMing = null
  handleLoadData()
}

// 查询表格信息
const handleLoadData = async () => {
  tableLoading.value = true
  const resp = await useLoadChuanYuanKuApi(queryParams)
  tableLoading.value = false
  tableData.value = resp.data.records
  total.value = resp.data.total
}

const handleChangeUpdate = async (record, field) => {
  var params = {
    id: record.id,
    field: field,
    value: record[field]
  }
  useMessage().success("操作成功!")
}

// 搜索
const handleSearch = () => {
  queryParams.pageNo = 1;
  handleLoadData()
}

// 改变分页
const handleChangePageNo = (pno, psize) => {
  queryParams.pageNo = pno;
  queryParams.pageSize = psize;
  handleLoadData()
}


const handleOpenAdd = () => {
  addRef.value.handleOpen()
}

const handleEdit = (id) => {
  editRef.value.handleOpen(id)
}


const handleShowEdit = (id) => {
  showRef.value.handleOpen(id)
}

const handleDelete = async (id) => {
  try {
    await useDelChuanYuanKuApi(id)
    notification.destroy()
    notification.success({
      "message": "提示",
      "description": "删除成功"
    })
    handleLoadData()
  } catch (e) {
    useMessage().error(e.msg)
  }
}

// 导入xls回调
const handleUploadSuccess = ()=>{
  useMessage().success("导入成功")
  queryParams.pageNo = 1
  handleLoadData()
}


// 复制
const handleClipboardText = (e) => {
  const clipboard = new Clipboard('.copy-btn')
  // 复制成功
  clipboard.on('success', () => {
    useMessage().success('复制成功')
    // 释放内存
    clipboard.destroy()
  })
  // 复制失败
  clipboard.on('error', () => {
    useMessage().error('复制失败')
    // 释放内存
    clipboard.destroy()
  })
}

const handleChangeUpdateStatus = async (record, field) => {
  var params = {
    id: record.id,
    field: field,
    value: 0
  }

  await useUpdateStatusChuanYuanKuApi(params)
  useMessage().success("拒绝成功!")
  handleLoadData()
}

const handleLoadZhiweiData = async () => {
  var res = await useLoadChuanBoZhiWeiBiaoApi()
  zhiweiList.value = res.data
}

const handleAdGengzhongRefOpen = (obj)=>{
  addGengzhongRef.value.handleOpen(obj.id,obj.xinxiId)
}

onMounted(() => {
  handleLoadZhiweiData()
  handleLoadData()
})

</script>
<style scoped>
.editable-row-operations a {
  margin-right: 8px;
}
</style>
